<template>
	<div class="xuexizl">
		<img class="top-bar" src="/static/mfzllq.png" alt="" />
		<div class="list">
			<div class="item" v-for="item in list">
				<img class="icon" src="/static/文件.png" alt="" />
				<div class="right">
					<p class="title">{{item.title}}</p>
					<div class="describe">
						<p class="text">{{item.description}}</p>
						<button @click="openFile(item.fileUrl)" class="btn">领取</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import request from "@/request/index.js"
	import {httpResources} from "@/tool/index.js"
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			getList() {
				return request({
					url: '/api/ziliao',
					method: 'GET',
				}).then(res => {
					this.list = res
					return res
				});
			},
			openFile(filePath) {
				uni.openDocument({
					filePath:httpResources(filePath) ,
					showMenu: true,
				});
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>
<style lang="scss">
	.xuexizl {
		.top-bar {
			width: 750rpx;
			display: block;
			margin: 0 auto;
		}

		.list {
			margin-top: 20rpx;
			padding: 0 30rpx;

			.item {
				height: 178rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0 34rpx;

				.icon {
					width: 122rpx;
					height: 122rpx;
					background: #BFBFBF;
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: center;
					height: 100%;
					flex-direction: column;
					gap: 22rpx 0;

					.title {
						font-size: 28rpx;
						color: #111111;
					}

					.describe {
						font-size: 22rpx;
						color: #F68C30;
						display: flex;
						gap: 0 50rpx;

						.text {
							flex: 1;
						}

						.btn {
							width: 146rpx;
							height: 50rpx;
							border-radius: 25rpx 25rpx 25rpx 25rpx;
							border: 2rpx solid rgb(255, 87, 58);
							font-size: 22rpx;
							color: rgb(255, 87, 58);
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

			}
		}
	}
</style>